<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-time Logs</title>
    <style>
        #logs {
            white-space: pre-wrap;
            font-family: monospace;
            background-color: #f4f4f4;
            padding: 10px;
            border: 1px solid #ddd;
            height: 400px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<h1>Real-time Logs</h1>
<div id="logs"></div>

<script>
    const ws = new WebSocket('ws://localhost:8080/ws');

    ws.onopen = function() {
        console.log('WebSocket connection opened');
    };

    ws.onmessage = function(event) {
        const logsDiv = document.getElementById('logs');
        logsDiv.innerHTML += event.data + '\n';
        logsDiv.scrollTop = logsDiv.scrollHeight; // 自动滚动到底部
    };

    ws.onclose = function() {
        console.log('WebSocket connection closed');
    };

    ws.onerror = function(error) {
        console.log('WebSocket error: ' + error);
    };
</script>
</body>
</html>